<style >
    .mshop-product {
        overflow-y: auto;
        height: 100%;
        padding-bottom: 46px;
    }

    .mshop-swiper-item {
        overflow: scroll;
        word-break: break-all;
    }

    .swiper-item-1,
    .swiper-item-2,
    .swiper-item-3 {
        padding-top: 46px;
    }

    .swiper-item-1 .bottom-tag {
        background-color: #e6e6e6;
        line-height: 20px;
        width: 100%;
        text-align: center;
        color: #666;
        position: relative;
        padding: 10px 0;
        margin-bottom: 46px;
    }

    .swiper-item-1 .bottom-tag::before {
        bottom: 20px;
        content: '';
        width: 20%;
        left: 0;
        position: absolute;
        border-bottom: 1px solid #999;
    }

    .swiper-item-1 .bottom-tag:after {
        bottom: 20px;
        content: '';
        width: 20%;
        right: 0;
        position: absolute;
        border-bottom: 1px solid #999;
    }

    .swiper-item-2 .article-container {
        padding-bottom: 46px;
    }

    .swiper-item-3 {
        background-color: blue;
    }

    .product-info {
        padding-bottom: 20px;
        overflow: auto;
    }

    .product-info .vux-no-group-title {
        background-color: #e6e6e6;
    }

    .product-info .vux-no-group-title .with_arrow:after {
        width: 8px;
        height: 8px;
        border-color: #3F51B5;
    }

    .product-info-title {
        font-size: 18px;
        font-weight: 300;
        padding: 0 6px;
    }

    .product-info-desc {
        color: #6d6d6d;
        padding: 0 6px;
        margin-top: 14px;
    }

    .mshop-product-footer {
        position: fixed;
        width: 100%;
        left: 0;
        bottom: 0;
        display: flex;
        justify-content: space-between;
        background-color: #e6e6e6;
        height: 46px;
        z-index: 100;
        /*border-top: 1px solid red;*/
    }

    .product-footer-icon {
        display: inline-flex;
        align-items: center;
        width: 40%;
        justify-content: space-around;
    }

    .product-footer-icon > span {
        /*width: 30px;*/
        /*height: 30px;*/
        display: inline-block;
        width: 24px;
        height: 24px;
    }

    .product-footer-icon .customer-service-icon {
        background: url('../assets/services.png') no-repeat;
        background-size: 24px;
    }

    .product-footer-icon .favorite-icon {
        background: url('../assets/favorite.png') no-repeat;
        background-size: 24px;
    }

    .product-footer-icon .shopping_cart {
        background: url('../assets/shopping-cart.png') no-repeat;
        background-size: 24px;
    }

    .product-footer-icon .favorite-icon.choosed {
        background: url('../assets/favorite-choose.png') no-repeat;
        background-size: 24px;
    }

    .product-footer-button {
        display: inline-flex;
    }

    .product-footer-button > span {
        padding: 10px 12px;
        display: inline-block;
        color: white;
    }

    .product-footer-button .shopping_cart_button {
        background-color: #FFC107;
    }

    .product-footer-button .shopping_order_button {
        background-color: #f44336;
    }

    .mshop-product-sku-mask {
        width: 100%;
        opacity: .7;
        height: 100%;
        position: fixed;
        background-color: black;
        top: 0;
        left: 0;
        z-index: 100;
    }

    .sku-fade-transition {
        transition: all .4s ease;
    }

    .sku-fade-enter,
    .sku-fade-leave {
        opacity: 0;
    }

    .sku-expand-transition {
        max-height: 80%;
        transition: all .4s ease;
    }

    .sku-expand-enter,
    .sku-expand-leave {
        max-height: 0;
        opacity: 0;
    }

    .mshop-product-sku {
        width: 100%;
        position: fixed;
        height: 70%;
        left: 0;
        bottom: 0;
        background-color: white;
        z-index: 120;
        font-size: 13px;
    }

    .sku-control {
        position: absolute;
        top: 100px;
        bottom: 48px;
        left: 0;
        right: 0;
        overflow: auto;
    }

    .sku-list {
        /*padding-top: 20px;*/
    }

    .sku-group {
        display: block;
        margin: 0 auto;
        width: 94%;
    }

    .sku-group > h2 {
        font-size: 13px;
        font-weight: 400;
        color: #666;
        margin-bottom: .5em;
        padding: 1em 0 .5em;
    }

    .sku-group-item {
        display: flex;
        flex-wrap: wrap;
        word-break: break-all;
    }

    .sku-group-item label {
        padding: .5em 1.2em;
        margin: 0 .5em .5em 0;
        min-width: 2em;
        background-color: #fff;
        border: 1px solid #ccc;
        color: #ccc;
        display: inline-block;
        max-width: 100%;
        text-align: center;
        border-radius: 3px;
        box-sizing: border-box;
    }

    .sku-group-item label.active {
        border-color: #666;
        color: black;
    }

    .sku-group-item label.choosed {
        border-color: #b10000;
        color: #b10000;
    }

    .sku-header {
        display: block;
        margin: 0 auto;
        width: 96%;
        box-shadow: 0 1px 0 rgba(0,0,0,.05),0 .5px 0 rgba(0,0,0,.09);
        height: 78px;
        padding: 10px;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    .sku-header .img {
        display: inline-block;
        width: 30%;
        z-index: 103;
        position: relative;
        top: -32px;
        padding: 2px;
        border: 2px solid #ddd;
        background-color: #fff;
        border-radius: 4px;
        margin-right: 1em;
        height: 100px;
        width: 100px;
        float: left;
    }

    .sku-header .img img {
        max-width: 100%;
        max-height: 100%;
        display: block;
        border-radius: 4px;
    }

    .sku-header .main {
        overflow: hidden;
        word-break: break-all;
    }

    .sku-header .main .price-container {
        color: #DD2727;
        /*height: 18px;*/
        line-height: 18px;
        font-size: 16px;
        padding-right: 10px;
        vertical-align: middle;
    }

    .sku-header .main .stock-container {
    }

    .sku-header .main .sku-tips {
        margin-right: 38px;
        overflow: hidden;
        height: 40px;
    }

    .sku-header .sback {
        position: absolute;
        width: 24px;
        height: 24px;
        display: block;
        top: 5px;
        right: 25px;
        background: url('../assets/delete.png') no-repeat;
        background-size: 24px;
    }

    .sku-footer {
        position: absolute;
        bottom: 0;
        left: 0;
        border-top: 1px solid #e5e5e5;
        text-align: center;
        width: 100%;
        display: flex;
        justify-content: space-around;
    }

    .sku-footer > button {
        height: 48px;
        border: 0;
        font-size: 15px;
        color: #fff;
        width: 50%;
    }

    .sku-footer .cart {
        background-color: #FFC107;
        transition: background-color .5s ease;
    }

    .sku-footer .order {
        background-color: #f44336;
        transition: background-color .5s ease;
    }

    .cart.disabled,
    .shopping_cart_button.disabled {
        background-color: #999;
    }

    .order.disabled,
    .shopping_order_button.disabled {
        background-color: #888;
    }

    .sku-number {
        padding: 10px 0 30px 0;
    }

    .product-info-price {
        padding: 0 6px;
        display: flex;
        padding-bottom: 1em;
        justify-content: space-between;
    }

</style>

<template>
    <div class="mshop-product">
        <swiper :headers="headers" v-ref:swiper>
            <swiper-item class="swiper-item-1" v-ref:product v-pullup-directive title="继续拖动，查看图文详情" v-bind:vaction="display_bottom">
                <!-- <pullup :title="继续拖动，查看图文详情" :action="display_bottom"> -->
                    <carousel :auto height="340px" v-if="product.imgs" :value="product.imgs"></carousel>
                    <div class="product-info">
                        <p class="product-info-title">{{current_product.name}}</p>
                        <div class="product-info-price">
                            <price :price="current_product.price"></price>
                            <m-number :value.sync="product_qty" :min="1" ></m-number>
                        </div>
                        <group v-if="skus._keys && skus._keys.length > 0">
                            <cell :title="current_choose_str" is-link @click="display_sku = true"></cell>
                        </group>
                        <p class="product-info-desc">{{product.desc}}</p>
                    </div>
                <!-- </pullup> -->
            </swiper-item>

            <swiper-item class="swiper-item-2" :action="display_description" :index="1" id="image-lazyload">
                <m-article service="product" v-ref:article ></m-article>
            </swiper-item>

            <swiper-item class="swiper-item-3">
            </swiper-item>
        </swiper>

        <div class="mshop-product-footer">
            <div class="product-footer-icon">
                <span class="favorite-icon" :class="{'choosed': product.favorite}" @click="do_favorite"></span>
                <span class="customer-service-icon" ></span>
                <span class="shopping_cart" v-link="{path: '/cart'}"></span>
            </div>
            <div class="product-footer-button">
                <span class="shopping_cart_button" :class="{'disabled': un_attribute_key.length > 0}" @click="shopping_cart">加入购物车</span>
                <span class="shopping_order_button" :class="{'disabled': un_attribute_key.length > 0}" @click="shopping_order">{{ submit_button }}</span>
            </div>
        </div>

        <div class="mshop-product-sku-mask" @click.prevent.stop="display_sku = false" @touchmove.prevent.stop v-show="display_sku" transition="sku-fade"></div>

        <div class="mshop-product-sku" v-show="display_sku" transition="sku-expand">
            <div class="sku-header">
                <div class="img">
                    <img :src="current_product.img" />
                </div>

                <div class="main">
                    <div class="price-container">
                        <span class="price">￥{{ current_product.price }}</span>
                    </div>

                    <div class="stock-container">
                        <span class="stock">
                            <label class="label">库存</label>
                            {{ current_product.stock }}{{ current_product.uom }}
                        </span>
                    </div>

                    <div class="sku-tips">
                        <span class="tips">
                            <label class="label">{{ current_choose_str }}</label>
                        </span>
                    </div>
                </div>

                <a class="sback" @click="display_sku = false"></a>
            </div>

            <div class="sku-control">
                <ul class="sku-list">
                    <li class="sku-group" v-for="(name, attribute) in skus.attributes">
                        <h2>{{name}}</h2>
                        <div class="sku-group-item">
                            <label
                             :class="{choosed: value.choosed, active: value.active}"
                             @click="select_value(attribute.name, value)"
                             v-for="(name, value) in attribute.values">
                             {{name}}
                            </label>
                        </div>
                    </li>
                </ul>

                <div class="sku-number">
                    <group>
                        <x-number title="数量" :value.sync='product_qty' :min=1 ></x-number>
                    </group>
                </div>
            </div>

            <div class="sku-footer">
                <button class="cart" :class="{'disabled': un_attribute_key.length > 0}" @click="shopping_cart">加入购物车</button>
                <button class="order" :class="{'disabled': un_attribute_key.length > 0}" @click="shopping_order">{{ submit_button }}</button>
            </div>

        </div>

        <toast :show.sync="show_toast">添加购物车成功</toast>
    </div>
</template>

<script>
    import Carousel from 'util-components/carousel.vue'
    import Swiper from 'util-components/swiper.vue'
    import SwiperItem from 'util-components/swiper-item.vue'
    import MArticle from 'components/article/m-article.vue'
    import Price from 'util-components/price.vue'
    import MNumber from 'util-components/m-number.vue'

    import PullupDirective from 'directives/pullup'

    import productService from 'services/product'
    import cartService from 'services/cart'
    import orderService from 'services/order'
    import skuFactory from 'lib/sku'

    import Cell from 'vux-components/Cell'
    import Group from 'vux-components/Group'
    import XNumber from 'vux-components/x-number'
    import Toast from 'vux-components/toast'

    import getters from '../vuex/getters'
    import ShopType from '../shop-type'

    const variant = '[{"price": 5288.0, "stock": 12.0, "variant": {"\u5185\u5b58\u5927\u5c0f": "16GB", "\u673a\u8eab\u989c\u8272": "\u94f6\u8272"}, "id": 22, "name": "Apple/\u82f9\u679c\u56fd\u884ciPhone6s 4.7\u82f1\u5bf8 4G\u624b\u673a \u539f\u5c01\u56fd\u884c"}, {"price": 5288.0, "stock": 32.0, "variant": {"\u5185\u5b58\u5927\u5c0f": "16GB", "\u673a\u8eab\u989c\u8272": "\u9ed1\u8272"}, "id": 23, "name": "Apple/\u82f9\u679c\u56fd\u884ciPhone6s 4.7\u82f1\u5bf8 4G\u624b\u673a \u539f\u5c01\u56fd\u884c"}, {"price": 5288.0, "stock": 1.0, "variant": {"\u5185\u5b58\u5927\u5c0f": "16GB", "\u673a\u8eab\u989c\u8272": "\u571f\u8c6a\u91d1"}, "id": 24, "name": "Apple/\u82f9\u679c\u56fd\u884ciPhone6s 4.7\u82f1\u5bf8 4G\u624b\u673a \u539f\u5c01\u56fd\u884c"}, {"price": 5288.0, "stock": 0.0, "variant": {"\u5185\u5b58\u5927\u5c0f": "16GB", "\u673a\u8eab\u989c\u8272": "\u8111\u6b8b\u7c89"}, "id": 25, "name": "Apple/\u82f9\u679c\u56fd\u884ciPhone6s 4.7\u82f1\u5bf8 4G\u624b\u673a \u539f\u5c01\u56fd\u884c"}, {"price": 6088.0, "stock": 30.0, "variant": {"\u5185\u5b58\u5927\u5c0f": "64GB", "\u673a\u8eab\u989c\u8272": "\u94f6\u8272"}, "id": 26, "name": "Apple/\u82f9\u679c\u56fd\u884ciPhone6s 4.7\u82f1\u5bf8 4G\u624b\u673a \u539f\u5c01\u56fd\u884c"}, {"price": 6088.0, "stock": 0.0, "variant": {"\u5185\u5b58\u5927\u5c0f": "64GB", "\u673a\u8eab\u989c\u8272": "\u9ed1\u8272"}, "id": 27, "name": "Apple/\u82f9\u679c\u56fd\u884ciPhone6s 4.7\u82f1\u5bf8 4G\u624b\u673a \u539f\u5c01\u56fd\u884c"}, {"price": 6088.0, "stock": 5.0, "variant": {"\u5185\u5b58\u5927\u5c0f": "64GB", "\u673a\u8eab\u989c\u8272": "\u571f\u8c6a\u91d1"}, "id": 28, "name": "Apple/\u82f9\u679c\u56fd\u884ciPhone6s 4.7\u82f1\u5bf8 4G\u624b\u673a \u539f\u5c01\u56fd\u884c"}, {"price": 6088.0, "stock": 0.0, "variant": {"\u5185\u5b58\u5927\u5c0f": "64GB", "\u673a\u8eab\u989c\u8272": "\u8111\u6b8b\u7c89"}, "id": 29, "name": "Apple/\u82f9\u679c\u56fd\u884ciPhone6s 4.7\u82f1\u5bf8 4G\u624b\u673a \u539f\u5c01\u56fd\u884c"}, {"price": 6888.0, "stock": 230.0, "variant": {"\u5185\u5b58\u5927\u5c0f": "128GB", "\u673a\u8eab\u989c\u8272": "\u94f6\u8272"}, "id": 30, "name": "Apple/\u82f9\u679c\u56fd\u884ciPhone6s 4.7\u82f1\u5bf8 4G\u624b\u673a \u539f\u5c01\u56fd\u884c"}, {"price": 6888.0, "stock": 53.0, "variant": {"\u5185\u5b58\u5927\u5c0f": "128GB", "\u673a\u8eab\u989c\u8272": "\u9ed1\u8272"}, "id": 31, "name": "Apple/\u82f9\u679c\u56fd\u884ciPhone6s 4.7\u82f1\u5bf8 4G\u624b\u673a \u539f\u5c01\u56fd\u884c"}, {"price": 6888.0, "stock": 0.0, "variant": {"\u5185\u5b58\u5927\u5c0f": "128GB", "\u673a\u8eab\u989c\u8272": "\u571f\u8c6a\u91d1"}, "id": 32, "name": "Apple/\u82f9\u679c\u56fd\u884ciPhone6s 4.7\u82f1\u5bf8 4G\u624b\u673a \u539f\u5c01\u56fd\u884c"}, {"price": 6888.0, "stock": 4.0, "variant": {"\u5185\u5b58\u5927\u5c0f": "128GB", "\u673a\u8eab\u989c\u8272": "\u8111\u6b8b\u7c89"}, "id": 33, "name": "Apple/\u82f9\u679c\u56fd\u884ciPhone6s 4.7\u82f1\u5bf8 4G\u624b\u673a \u539f\u5c01\u56fd\u884c"}]'

    const temp_product = {
        id: 1,
        imgs: '[{"img": "/static/1.jpeg"},{"img": "/static/2.jpeg"},{"img": "/static/3.jpeg"},{"img": "/static/4.jpeg"}]',
        name: '守望先锋普通版',
        price: '198-321',
        // desc: '雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄雄',
        uom: '个',
        stock: 42,
        favorite: true,
        img: '/static/3.jpeg',
        variant: variant,
    }

    const headers = ['单品', '详情', '评论'];

    export default {
        data: () => ({
             product: {},
             product_qty: 1,
             current_product: {},
             headers: headers,
             description: false,
             skus: false,
             variant: {},
             un_attribute_key: [],
             current_choose: {},
             display_sku: false,
             show_toast: false,
             submit_button: '立即下单',
        }),
        components: {
            Carousel,
            Swiper,
            SwiperItem,
            MArticle,
            Cell,
            Group,
            XNumber,
            Toast,
            Price,
            MNumber
        },
        computed: {
            current_choose_str() {
                let res = []
                if (this.un_attribute_key.length == 0) {
                    res.push(['已选择:']);
                    for (const attribute in this.current_choose) {
                        res.push(`${attribute}:${this.current_choose[attribute].name}`)
                    }
                } else {
                    res.push(['请选择:']);
                    res = res.concat(this.un_attribute_key);
                }

                return res.join(' ');
            }
        },
        directives: {
            PullupDirective
        },
        ready () {
            this.submit_button = ShopType.product.get_submit_button(this.shop_type);
        },
        vuex: {
            getters
        },
        watch: {
            un_attribute_key(keys) {
                if (keys.length.length > 0) {
                    this.init_current_product();
                }
            },
            product () {
                this.init_current_product();
            }
        },
        methods: {
            display_bottom () {
                this.swiper_to(1);
            },
            swiper_to (index) {
                this.$refs.swiper.$emit('swiper-to', index);
            },
            init_current_product () {
                this.current_product = {
                    id: this.product.variant_id,
                    name: this.product.name,
                    img: this.product.img,
                    price: this.product.price,
                    stock: this.product.stock,
                    uom: this.product.uom,
                }
            },
            select_value (attribute, value) {
                if (value.active) {
                    const res = this.skus.select_value(attribute, value);
                    this.un_attribute_key = this.skus.get_unchoosed_key();
                    this.current_choose = this.skus.get_current_choose();

                    if (res) {
                        this.current_product = res;
                    }
                }
            },
            shopping_cart () {
                if (this.un_attribute_key.length === 0) {
                    cartService.addLine(this.current_product.id, this.product_qty).then(({success}) => {
                        if (success) {
                            this.show_toast = true;
                        }
                        this.display_sku = false;
                    });
                } else {
                    this.display_sku = true;
                }
            },
            shopping_order () {
                if (this.un_attribute_key.length === 0) {
                    orderService.canPay(this.current_product.price * this.product_qty, this.shop_type.type).then(() => {
                        this.$route.router.go({
                            path: 'order/edit',
                            query: {product: JSON.stringify({
                                product_id: this.current_product.id,
                                product_qty: this.product_qty,
                            })},
                            append: true
                        });
                    })
                } else {
                    this.display_sku = true;
                }
            },
            do_favorite () {
                this.product.favorite = !this.product.favorite;
                productService.syncFavorite(this.product.id, this.product.favorite);
            },
            display_description () {
                if (!this.description) {
                    this.$refs.article.$emit('refresh-items', this.product.id);
                    this.description = true;
                }
            }
        },
        route: {
            data ({to}) {
                return productService
                    .fetch(to.params.product || to.query.product)
                    .then(({data}) => ({product: data}), () => ({product: temp_product}))
                    .then(({product}) => {
                        const skus = new skuFactory(JSON.parse(product.variant));
                        const un_attribute_key = skus.get_unchoosed_key();
                        const display_sku = Boolean(to.query.sku);

                        this.swiper_to(0);
                        return { skus, un_attribute_key, product, display_sku, product_qty: 1 , description: false};
                    })
            }
        },
    }
</script>
